<template>
	<section class="result_wrap">
		<div class="res_screen">
			<ul class="horizontal_scroll_list">
				<li v-for="sc,key in _GLOBAL.config.search_result" :class="{cur: sc.key == resultType}" @click="handlerScreen(sc.key)">{{sc.name}}</li>
			</ul>
		</div>
		<my-scroll :data="resultList" :pullup="true" @scrollToEnd="loadMore">
			<div class="res_list">
				<template v-if="resultType == '1' || resultType == '1006'">
					<mu-list class="songs_lists">
						<template v-for="list,key in resultList">
							<mu-list-item button>
								<mu-list-item-content class="pt-7 pb-7">
									<mu-list-item-title v-html="$options.filters.highlight(list.name , searchText)"></mu-list-item-title>
									<mu-list-item-sub-title v-html="$options.filters.highlight(list.artists[0].name + ' - ' + list.album.name , searchText)"></mu-list-item-sub-title>
								</mu-list-item-content>
							</mu-list-item>
							<mu-divider/>
						</template>
					</mu-list>
				</template>

				<template v-else-if="resultType == '10'">
					<mu-grid-list class="gridlist" :padding="_GLOBAL.config.padding/2">
						<mu-grid-tile v-for="albums, index in resultList" :key="index" >
							<div slot="default" class=" img_wrap">
								<img v-lazy="albums.picUrl" />
							</div>
							<span slot="title" class="f-12 text_left"  v-html="$options.filters.highlight( albums.name , searchText)"></span>
							<span slot="subTitle" class="f-12 text_left primary">by <b class="white" v-html="$options.filters.highlight( albums.artist['name'] , searchText)"></b></span>
							<mu-button slot="action" icon>
								<mu-icon value="play_circle_outline"></mu-icon>
							</mu-button>
						</mu-grid-tile>
					</mu-grid-list>
				</template>

				<template v-else-if="resultType == '100'">
					<mu-grid-list class="gridlist" :padding="_GLOBAL.config.padding/2">
						<mu-grid-tile v-for="artists, index in resultList" :key="index" >
							<div slot="default" class=" img_wrap">
								<img v-lazy="artists.picUrl" />
							</div>
							<span slot="title" class="f-12 text_left" v-html="$options.filters.highlight( artists.name , searchText)"></span>
							<!-- <span slot="subTitle" class="f-12 text_left primary">by <b class="white">{{ artists.artist['name'] }}</b></span> -->
							<!-- <mu-button slot="action" icon>
								<mu-icon value="play_circle_outline"></mu-icon>
							</mu-button> -->
						</mu-grid-tile>
					</mu-grid-list>
				</template>

				<template v-else-if="resultType == '1000'">
					<mu-grid-list class="gridlist" :padding="_GLOBAL.config.padding/2">
						<mu-grid-tile v-for="playlist, index in resultList" :key="index" @click.native="$router.push('/sheets/details/'+playlist.id)">
							<div slot="default" class=" img_wrap">
								<img v-lazy="playlist.coverImgUrl" />{{playlist.id}}
							</div>
							<span slot="title" class="f-12 text_left" v-html="$options.filters.highlight( playlist.name , searchText)"></span>
							<span slot="subTitle" class="f-12 text_left primary">by <b class="white" v-html="$options.filters.highlight( playlist.creator['nickname'] , searchText)"></b></span>
							<mu-button slot="action" icon>
								<mu-icon value="play_circle_outline"></mu-icon>
							</mu-button>
						</mu-grid-tile>
					</mu-grid-list>
				</template>
				

				<!-- 用户 -->
				<template v-else-if="resultType == '1002'">
					<mu-list textline="two-line">
						<template  v-for="userprofiles,key in resultList">
							<mu-list-item avatar :ripple="false" button>
								<mu-list-item-action>
									<mu-avatar>
										<img v-lazy="userprofiles.avatarUrl">
									</mu-avatar>
								</mu-list-item-action>
								<mu-list-item-content>
									<mu-list-item-title v-html="$options.filters.highlight( userprofiles.nickname , searchText)"></mu-list-item-title>
									<mu-list-item-sub-title v-html="$options.filters.highlight(  userprofiles.signature , searchText)"></mu-list-item-sub-title>
								</mu-list-item-content>
							</mu-list-item>
							<mu-divider></mu-divider>
						</template>
					</mu-list>
				</template>
					

				<!-- mvs -->
				<template v-else-if="resultType == '1004'">
					<ul class="mvs_lists">
						<li  v-for="mv,key in resultList">
							<div class="flex align_center ">
								<div class="thumb_wrap">
									<img class="" v-lazy="mv.cover">
									<div class="play_count">
										<span class="headset">
											<!-- <mu-icon value="headset"></mu-icon> -->
											<em>{{ mv.playCount | _format_count | text_loading}}</em>
										</span>
									</div>
								</div>
								<div class="mv_data">
									<h4 v-html="$options.filters.highlight(mv.name, searchText)"></h4>
									<p>
										<span v-for="ar in mv.alias" v-html="$options.filters.highlight(ar , searchText)"></span>
										<span v-html="$options.filters.highlight(mv.artistName , searchText)"></span>
									</p>
								</div>
							</div>
						</li>
					</ul>
				</template>
				
				<slot></slot>

			</div>
		</my-scroll>
	</section>
</template>
<script>
	var _result,searchValue;
	export default{
		name: "search_result",
		props:{
			resList:{
				type: Array,
				// value: [],
				default: [],
			},
			resultType:{
				type: String,
				value: "1",
			},
			searchText:{
				type: String,
				value: "",
			}
		},
		data(){
			return{
				resultList:[],
				resType: 'songs',
			}
		},
		mounted(){
			this.$nextTick(()=>{
			})
		},
		watch:{
			'resList':{
				handler(val,oldVal){
					this.resultList = val;

				},	
				deep: true
			},
			'searchText':{
				handler(val,oldVal){
					searchValue = val;
				},	
				deep: true
			}
		},
		methods:{
			handlerScreen(key){
				this.resultList = [];
				this.$emit('handlerScreenItem',key);
			},
			loadMore(){
				this.$emit('loadMore')
			}
		},
		filters:{
			highlight(val){
				if (searchValue && searchValue.length > 0) {
					// 匹配关键字正则
					let replaceReg = new RegExp(searchValue, 'g');
					// 高亮替换v-html值
					let replaceString = '<span class="highlight">' + searchValue + '</span>';
					// 开始替换
					val = val.replace(replaceReg, replaceString);
				}
				return val;
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '@/style/base/_color.scss';
	.result_wrap{
		height: calc(100% + 20px - 38px);
		margin: -10px;
	}
	.songs_lists{
		/deep/ .mu-item {
			height: auto;
		}
	}
	
	.mvs_lists{
		li{
			height: 85px;
			margin: 5px 0;
			>div{
				height: 100%;
			}
			.thumb_wrap{
				/*width: 15rem;*/
				height: 100%;
				position: relative;
				flex: 1;
				overflow: hidden;
				img{
					position: absolute;
					left: 50%;
					top: 0;
					/*width: 100%;*/
					height: 100%;
					transform: translateX(-50%);
				}
			}
			.mv_data{
				flex: 2;
				margin-left: 10px;
				text-align: left;
				> h4{
					font-size: 16px;
					color: #000;
					margin-bottom: 5px;

				}
				>p {
					font-size: 14px;
					color: #666;
				}
			}
		}
	}
</style>